// 精确控制停止转动的角度
import Turntable from './Turntable.js';

window.onload = function () {
    var canvas = document.getElementById('myCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var stage = new createjs.Stage(canvas);

    // Enable touch interactions if supported on the current device
    createjs.Touch.enable(stage);

    // Set the background to black
    var background = new createjs.Shape();
    background.graphics.beginFill("black").drawRect(0, 0, canvas.width, canvas.height);
    stage.addChild(background);
    stage.update();

    // Preload the images
    var queue = new createjs.LoadQueue();
    queue.on("complete", handleComplete, this);
    queue.on("progress", function (event) {
        // event.progress 表示加载进度，范围从 0 到 1
        console.log("Loading progress: " + (event.progress * 100).toFixed(2) + "%");
    });

    queue.loadManifest([
        { id: "turntable", src: "turntable.png" },
        { id: "arrowBtn", src: "arrow_btn.png" }
    ]);

    var turntable;
    var isRotating = true;
    var rotationSpeed = 8;

    function handleComplete() {
        handleImageComplete();
    }

    function handleImageComplete() {
        // Load turntable image
        var turntableImage = queue.getResult("turntable");

        // Create Turntable instance
        turntable = new Turntable(turntableImage, canvas.width / 2, canvas.height / 2 + 30, rotationSpeed);
        turntable.isRotating = isRotating;
        queue.on("progress", function (event) {
    // event.progress 表示加载进度，范围从 0 到 1
    console.log("Loading progress: " + (event.progress * 100).toFixed(2) + "%");});
        stage.addChild(turntable.bitmap);
        stage.update();

        // Load the button image
        var arrowBtnImage = queue.getResult("arrowBtn");

        var spriteSheet = new createjs.SpriteSheet({
            images: [arrowBtnImage],
            frames: { width: arrowBtnImage.width / 2, height: arrowBtnImage.height },
            animations: { out: 0, over: 0, down: 1 }
        });
        var arrowBtnSprite = new createjs.Sprite(spriteSheet, "out");
    }

    createjs.Ticker.framerate = 60;
    createjs.Ticker.on("tick", handleTick);
    function handleTick(event) {
        if (isRotating && turntable) {
            turntable.update();
            stage.update();
        }
    }
};

